@import '../../asset/base/index.less';
.big_playlist {
  color: @text-color-light;
  height: 450px;
  display: flex;
  .music_playlist {
    width: 250px;
    padding: 10px;
    span {
      cursor: pointer;
    }
    .title {
      color: @text-color;
    }
    .playlist {
      height: calc(100% - 47px);
      overflow-y: auto;
    }
    .list {
      color: @text-color-theme;
      display: flex;
      justify-content: space-between;
      .left {
        width: 190px;
        display: flex;
        flex-wrap: nowrap;
        .empty {
          margin-right: 16px;
        }
        .name {
          flex: 1;
          margin-left: 5px;
          color: @text-color;
          .ellipse();
        }
      }
    }
  }
  .music_detail {
    padding-top: 40px;
    flex: 1;
    display: flex;
    text-align: center;
    .detail_wrap {
      width: 400px;
      max-width: 400px;
      .title {
        .name {
          font-size: 16px;
          font-weight: 500;
          line-height: 30px;
          .ellipse();
        }
        .singer {
          margin-top: 10px;
          span {
            margin: 0 5px;
          }
        }
      }
      .img_wrap {
        margin-top: 20px;
        img {
          width: 200px;
          height: 200px;
          border-radius: 50%;
        }
        .play {
          animation: rotate 20s linear infinite;
        }
        .pause {
          animation-play-state: paused;
        }
      }
      .action {
        margin-top: 30px;
        display: flex;
        align-items: center;
        color: @text-color-theme;
        justify-content: center;
        span {
          margin: 0 5px;
          font-size: 20px;
          font-size: 22px;
          cursor: pointer;
          &.disabled {
            color: @text-color-theme;
          }
        }
      }
    }
    .lyric {
      flex: 1;
      height: calc(100% - 10px);
      overflow-y: auto;
      p {
        line-height: 30px;
      }
    }
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
